<template>
  <div class="waterfall-container" :style="{ '--column-count': columnCount, '--column-gap': columnGap + 'px', '--row-gap': rowGap + 'px' }">
    <slot />
  </div>
</template>

<script setup>
import {defineProps} from 'vue'

/**
 * @description 网格布局组件
 * @param {Number} columnCount 列数, 移动端改为1比较合适
 * @param {Number} columnGap 列间距
 * @param {Number} rowGap 行间距
 */
const props = defineProps({
  columnCount: {
    type: Number,
    default: 3
  },
  columnGap: {
    type: Number,
    default: 10
  },
  rowGap: {
    type: Number,
    default: 10
  }
})


</script>

<style scoped lang="scss">
.waterfall-container {
  column-count: var(--column-count);
  column-gap: var(--column-gap);
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  gap: var(--row-gap) var(--column-gap);
  padding: 8px;
}

.waterfall-container > * {
  break-inside: avoid;
  background-color: #f0f0f0;
  padding: 10px;
}
</style>    